import {ResultPage,Card,Switch,Button} from "antd-mobile";
import "./style.css"
import {useSelector,useDispatch} from 'react-redux'
import {LoopOutline} from 'antd-mobile-icons'
import {cityExchange} from "../../reducers/citySlice"
import {dayjs} from "dayjs"
import {useMemo} from "react"


const days=['星期日','星期一','星期二','星期三','星期四','星期五','星期六']

function Home(){
    const citySlice=useSelector((state)=>state.citySlice);

    const dispath=useDispatch();

    const exChangeFN=()=>{
        dispath(cityExchange())
    }

    const dayNum=useMemo(()=>{
        return dayjs(citySlice.date).day();
    },[citySlice.date]);


    return(

        <ResultPage
        state=''
        title='火车票'
        description='购票,服务您的每一次出行'
        
        >

            <Card className='city_box'>
                <div className="city_select">
                    <div>{citySlice.start}</div>
                    <LoopOutline onclick={exChangeFN}></LoopOutline>
                    <div className="city_select_end">{citySlice.end}</div>
                   

                   <div className="city_date" onclick={()=>{
                    setVisiblel(true)
                   }}>
                    {citySlice.date}
                    <span>{days[dayNum]}</span>

                   </div>

                   <div className="city_isSpeed">

                        <span>是否只看高铁</span>
                        <Switch checked={citySlice.isSpeed} onChange={isSpeedchang}></Switch>
                   </div>

                   <div className="city_search_btn">
                    <Button block color="primary" size="middle">
                        搜索
                    </Button>
                   </div>
              
              
                </div>
            </Card>
            <DataPopup visiblel={visiblel} setVisiblel={setVisiblel}></DataPopup>


        </ResultPage>
    )

}